<template>
	<view class="user" :class="[isDark?'dark':'', $store.state.AppStyle]" :style="{'background-color':isDark?'#1c1c1c':'#f6f6f6','min-height':isDark?'100vh':'auto'}">
		<view class="header" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar" :class="isDark?'dark':'bg-white'" :style="{'height': CustomBar + 'px','padding-top':StatusBar + 'px','background-color':isDark?'#1c1c1c':'#ffffff'}">
				<view class="action" @tap="back">
					<text class="cuIcon-back"></text>
				</view>
				<view class="content text-bold" :style="[{top:StatusBar + 'px'}]">
					{{$t('home.about.aboutus')}}
				</view>
				<view class="action">
				</view>
			</view>
		</view>
		<view :style="[{padding:NavBar + 'px 10px 0px 10px'}]"></view>
		<view class="app-about">
			<view class="app-logo">
				<image :src="logo" mode="widthFix"></image>
			</view>
			<view class="app-name">
				{{name}}
			</view>
			<view class="app-ver" v-if="wgtVer!=''">
				{{wgtVer}}
			</view>
			
		</view>
		<view class="cu-list menu margin-top">
			<!--  #ifdef APP-PLUS -->
			<view class="cu-item" @tap="isUpdate(true)">
				<view class="content">
					<text>{{$t('home.about.latestversion')}}</text>
				</view>
				<view class="action">
					<text class="update-tips bg-red" v-if="Update>0">News</text>
					<text class="text-gray">{{versionTitle}}</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<!--  #endif -->
			<view class="cu-item" @tap="rmlocal">
				<view class="content">
					<text class="tn-icon-clear  margin-right-sm"></text>
					<text>{{$t('home.about.clearcache')}}</text>
				</view>
				<view class="action">
					<text class="text-gray">{{ localdata }}</text>
				</view>
			</view>
			<view class="cu-item" @tap="yhxy">
				<view class="content">
					<text class="tn-icon-my-circle margin-right-sm"></text>
					<text>{{$t('home.about.useragreement')}}</text>
				</view>
				<view class="action">
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="cu-item" @tap="ysxy">
				<view class="content">
					<text class="tn-icon-safe margin-right-sm"></text>
					<text>{{$t('home.about.privacyagree')}}</text>
				</view>
				<view class="action">
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		
			
		<view class="about-tips">
			{{name + $t('home.about.frominternet')}}（{{email}}）{{$t('home.about.deleteit')}}
		</view>
		<!--  #ifdef APP-PLUS -->
		<view class="update" v-if="Update==2">
			<view class="update-bg">
				
			</view>
			<view class="update-box">
				<view class="update-main">
					<image src="../../static/app-plus/ic_ar.png"></image>
					<view class="update-title">{{$t('home.about.findnewversion')}}:{{versionTitle}}</view>
					<view class="update-intro"><rich-text :nodes="versionIntro"></rich-text></view>
					<view class="update-btn grid col-2">
						<view class="update-btn-box">
							<view class="update-btn-main bg-blue"  @tap="goUpdata(true)">
								{{$t('common.sure')}}
							</view>
						</view>
						<view class="update-btn-box">
							<view class="update-btn-main bg-gray" @tap="closeUpdate()">
								{{$t('common.cancel')}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--  #endif -->
	</view>
</template>

<script>
	import { localStorage } from '../../js_sdk/mp-storage/mp-storage/index.js'
	import darkModeMixin from '@/utils/darkModeMixin.js'
	export default {
		mixins: [darkModeMixin],
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBar:this.StatusBar +  this.CustomBar,
				AppStyle:this.$store.state.AppStyle,
				logo:"",
				name:"",
				email:"",
				versionCode:0,
				wgtVer:'',
				localdata: '',
				Update:0,
				versionUrl:"",
				versionTitle:"",
				versionIntro:"",
				aboutme:this.$API.GetAboutme(),
				
			}
		},
		onPullDownRefresh(){
			
		},
		onShow(){
			var that = this;
			// #ifdef APP-PLUS
			
			//plus.navigator.setStatusBarStyle("dark")
			
			that.isUpdate(false);
			// #endif
			that.name = that.$API.GetAppName();
			that.logo = that.$API.GetLogo();
			that.email = that.$API.GetAppEmail();
		},
		onLoad() {
			
			
		},
		methods: {
			ysxy() {
				uni.navigateTo({
					url: '/pages/user/privacy'
				});
			},
			yhxy() {
				uni.navigateTo({
					url: '/pages/user/agreement?button=none'
				});
			},
			closeLocal() {
				var that = this
				var userinfo = "";
				var token = "";
				//绕过用户状态
				if (localStorage.getItem('userinfo')) {
					userinfo = localStorage.getItem('userinfo')
					token = localStorage.getItem('token');
				}
				localStorage.clear();
				uni.showToast({
					title: that.$t('global.opersuccess'),
					icon: 'none',
					duration: 1000,
					position: 'bottom'
				})
				that.localdata = '0 KB'
				localStorage.setItem('userinfo', userinfo);
				localStorage.setItem('token', token);
			},
			get_cache_size() {
				var that = this
				var obj = uni.getStorageInfoSync()
				if (obj) {
					that.localdata = obj.currentSize + ' KB'
				} else {
					
				}
			},
			rmlocal() {
				var that = this;
				uni.showModal({
					title: that.$t('global.prompt'),
					content: that.$t('home.about.isclearcache'),
					success: function(res) {
						if (res.confirm) {
							that.closeLocal();
						} else if (res.cancel) {
							
						}
					}
				});
			},
			back(){
				uni.navigateBack({
					delta: 1
				});
			},
			goUpdata(){
				var that = this;
				if(that.versionUrl!=""){
					plus.runtime.openURL(that.versionUrl);  
				}
				that.closeUpdate();
			},
			isUpdate(Status) {
				var that = this;
			
				plus.runtime.getProperty(plus.runtime.appid, function(inf) {
			
					that.wgtVer = inf.version //获取当前版本号
					that.versionCode = inf.versionCode;
					var version = inf.versionCode;
					that.$Net.request({
						url: that.$API.GetUpdateUrl(),
						header: {
							'content-type': 'application/json'
						},
						method: 'get',
						success: function(res) {
							var versionCode = res.data.versionCode;
							that.versionUrl = res.data.versionUrl;
							that.versionTitle = res.data.version;
							that.versionIntro = res.data.versionIntro;
							if (Status) {
								uni.showToast({
									title: that.$t('home.about.testfinish'),
									icon:'none',
									duration: 1000,
									position:'bottom',
								});
							}
							if (versionCode > version) {
								uni.hideTabBar({
									animation: true
								})
								that.Update = 1;
								if (Status) {
									if (res.data.versionUrl != "") {
										plus.runtime.openURL(res.data.versionUrl);
									}
								}
							}
			
						},
						fail: function(res) {
			
						}
					})
			
				})
			},
			toPage(title,cid){
				uni.navigateTo({
				    url: '/pages/contents/info?cid='+cid+"&title="+title
				});
			},
			toAgreement(){
				uni.navigateTo({
				    url: '/pages/user/agreement'
				});
			},
			closeUpdate(){
				var that = this;
				that.Update = 1;
				// uni.showTabBar({
				// 	animation: true
				// });
			},
		},
	}
</script>

<style>
	page{
		background: #f9f9f9;
	}
</style>